<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			用户详情
		</view>
		<view class="base-box" v-if="!loading" >
			<view class="base">
				<u-table class="u-table-basic"  align="left">
					<u-tr style="" >
						<u-th class="u-table-th bold" align="left" >
							基础信息
						</u-th>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							店铺名称
						</u-td>
						<u-td class="u-table-td "  >
							{{data.title}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							店铺评分
						</u-td>
						<u-td class="u-table-td "  >
							{{data.score.grade}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							分类标题
						</u-td>
						<u-td class="u-table-td "  >
							{{data.type.title}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							地址
						</u-td>
						<u-td class="u-table-td "  >
							{{data.area.province}}-{{data.area.city}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							详细地址
						</u-td>
						<u-td class="u-table-td "  >
							{{data.area.address}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							标签数组
						</u-td>
						<u-td class="u-table-td "  >
							<view >
								<u-tag  v-for="item in data.label" :text="item" mode="plain" style="margin-right: 5px;" /> 
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							最近一条评价
						</u-td>
						<u-td class="u-table-td "  >
							<view >
								{{data.comment.text}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							订单量
						</u-td>
						<u-td class="u-table-td "  >
							<view >
								{{data.order}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							技师数量
						</u-td>
						<u-td class="u-table-td "  >
							<view >
								{{data.technician}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							店铺状态
						</u-td>
						<u-td class="u-table-td "  >
							<view :class="!data.status.value?'uni-color-success':'uni-color-error'" >
								{{data.status.text}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							审核状态
						</u-td>
						<u-td class="u-table-td "  >
							<view :class="data.examine_status.value != 2?'uni-color-success':'uni-color-error'" >
								{{data.examine_status.text}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							创建时间
						</u-td>
						<u-td class="u-table-td "  >
							<uni-dateformat :date="data.create_date"></uni-dateformat>
						</u-td>
					</u-tr>
					
				</u-table>
			</view>
			<view class="base">
				<u-table class="u-table-basic"  align="left" >
					<u-tr style="" >
						<u-th class="u-table-th bold" align="left" >
							图片信息
						</u-th>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td" width="104px" >
							店铺LOGO
						</u-td>
						<u-td class="u-table-td "  >
							<view class="flex-layout">
								<u-image width="70px" height="70px" :src="data.logo"
									@click="eventImage(data.logo)"></u-image>
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td" width="104px" >
							营业执照
						</u-td>
						<u-td class="u-table-td "  >
							<view class="flex-layout">
								<u-image width="170px" height="120px" :src="data.business_license"
									@click="eventImage(data.business_license)"></u-image>
							</view>
						</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
	</view>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import {onStepValue} from "/common/js_file/user-list.js" ;
	import Util from "/common/util/util.js";
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			return {
				loading:true,
				uid:'',
				data:{},
				addressData:[],// 地址信息
			}
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,position:'top',
					url: '/pages/user/user-list/user-list'
				})
			}
		},
		methods: {
			getData(){
				this.loading = true ;
				const field = "_id,title,logo,score,type,area,label,user_id,comment,order,technician,business_license,status,examine_status,create_date " ;
				global.getOne('shop',{_id:this.uid},field).then(res => {
					let data = res.data;
					this.data = data;
					console.log(data)
					this.loading = false ;
				})
			},
			initIdCard(idCard){
				return Util.formatBankCardNumber(`${idCard}`);
			},
			initBirthdy(birthdy){
				if( !birthdy ) return '' ;
				const firstFour = birthdy.substring(0, 4); // 截取前四位
				const remaining = birthdy.substring(4); // 截取剩余部分
				// 每两位添加空格
				const formatted = remaining.replace(/(.{2})/g, '-\$1 ').trim();
				return `${firstFour} ${formatted}`;
			},
			onStepValue(step){
				return onStepValue(step);
			},
			// 图片放大
			eventImage(image) {
				if(typeof image == 'string'){
					image = [image];
				}
				uni.previewImage({
					urls: image,
				});
			},
		}
	}
</script>

<style>
	.bold{
		font-weight: 600;
	}
	.base-box{
		display: flex; 
		gap:10px;
		margin-bottom:10px;
	}
	.base{
		width: 50%;
	}
</style>
